//
//  SegmentControl.swift
//  DocScaner
//
//  Created by liyahao on 2025/8/8.
//

import SwiftUI

struct SegmentControl: View {
    // 绑定到外部的状态，用于控制当前选中的索引
    @Binding var selIndex: Int
    // 数量
    let count: Int
    // 自定义选中项的颜色
    var selectedColor: Color = Color(.black)
    // 自定义未选中项的颜色
    var unselectedColor: Color = Color.gray.opacity(0.3)
    
    var body: some View {
        HStack(spacing: 8) { // 各个选项之间的间距
            ForEach(0..<count, id: \.self) { index in
                // 使用ZStack来叠加背景和文本，以实现药丸/圆形效果
                ZStack {
                    if selIndex == index {
                        // 选中状态：药丸形状
                        Capsule()
                            .fill(selectedColor)
                            .animation(.spring(), value: selIndex) // 药丸背景的动画
                    } else {
                        // 未选中状态：圆形
                        Circle()
                            .fill(unselectedColor)
                            .animation(.spring(), value: selIndex) // 圆形背景的动画
                    }
                }
                .contentShape(Rectangle()) // 使整个ZStack区域可点击
                .onTapGesture {
                    // 当点击时，更新选中索引
                    selIndex = index
                }
            }
        }
        .frame(width: CGFloat(count) * 10 + 30, height: 10)
        .padding(4) // 内部内边距，让背景看起来更自然
        .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 5) // 添加阴影
    }
}

#Preview {
    SegmentControl(selIndex: .constant(1), count: 3)
}
